<script setup>
const props = defineProps({
    items: {
        type: Array,
        default: () => []
    }
})
const wh = window.innerHeight * 0.90
let sectionBlock = ref([])
onMounted(() => {
    sectionBlock.value = document.querySelectorAll('.list3-item')
    window.addEventListener('scroll', (e) => {
        console.log(document.documentElement.scrollTop)

        sectionBlock.value.forEach((section, index) => {
            // 获取元素相对于视口的位置信息 包括距离视口底部的距离
            // 距离视口顶部的距离 和 元素的高度
            const { bottom, top, height } = section.getBoundingClientRect()

            // 如果元素完全位于视口之外 或者完全位于视口之上 不进行
            if (bottom < 0 || top > wh) return
            // const y = (1 - (top / height)) * 80

            const y = (document.documentElement.scrollTop / ((index + 1) * height)) * 600
            if (index == 1) {
                // console.log(bottom, top, height, y)

            }
            section.style.backgroundPosition = `center calc(100% + ${y}px)`
        })
    })
})
</script>
<template>
    <div class="main">
        <section class="list3-item" v-for="item in items" :key="item.title"
            :style="{ backgroundImage: `url(${item.image})` }">
            <div class="item-text">
                <div class="text-title">{{ item.title }}</div>
                <div class="text-desc">{{ item.desc }}</div>
            </div>
        </section>
    </div>
</template>

<style lang="scss" scoped>
.main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .list3-item {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        // 设置元素滚动对齐方式为起始位置，并且始终停止滚动
        // scroll-snap-align: start;
        // scroll-snap-stop: always;
        width: 100%;
        height: 45vh;
        overflow: hidden;
        background-size: cover;
        background-position: center 100%;
        background-repeat: no-repeat;

        &::before {
            content: "";
            display: block;
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.4);
            transition: all 0.3s ease;
        }

        &:hover::before {
            background-color: rgba(0, 0, 0, 0.2);
        }

        .item-text {
            color: #ffffff;
            font-family: "Courier New", Courier, monospace;
            text-align: center;
            z-index: 1;
        }

        .text-title {
            font-size: 2rem;
            font-weight: bolder;
            margin-bottom: 20px;
        }

        .text-desc {
            font-size: 1.2rem;
        }
    }
}
</style>